<template>
	<div style="position: static; background-color: #171717;height: 100vmin; ">
		<div class="test top">
			<div style="height: 100%;">
				<div class="special_offer_style"
					style="display: flex; justify-content: center; flex-direction: column;">
					<div style="margin: 0 0 15px 50px; font-size: 28px; font-weight: 700;color: #f6f6f6;">
						蓝竹云•共创未来
					</div>
					<div style="color: #f6f6f6;white-space: normal;width: 50%; margin-left: 50px; margin-bottom: 10px;">
						安全可靠、秒级响应、弹性伸缩的计算服务，支持按实际使用的资源计费，有效降低IT成本，丰富机型可选，满足您的多样化业务需求
					</div>
					<div style="">
						<button class="use xg_button"
							style="position: relative; left:3%; top: 20px; color: white; cursor:pointer;"
							@click="tobuy()">立即使用</button>
						<button class="use xg_button"
							style="position: relative; left:5%; top: 20px; color: white; cursor:pointer; "
							@click="tohelp()">使用帮助</button>
					</div>

				</div>
			</div>
		</div>

		<div style="display: flex; justify-content: space-between;color: #fff; ">
			<div class="test" style="width: 50%; height: 400px;">
				<h2 style="position: relative;top: 30px;height: 20%;margin-left: 50px;font-weight: 700;">
					最新公告
				</h2>
				<div class="special_offer_style"
					style="height: 70%;padding-top: 10px;position: relative;background-image: none;">
					<div v-for="(item,index) in newPublicNotice" v-bind:key="index" class="help_program"
						@click="showPubNotice(index)">{{item.title}}
					</div>
					<div v-if="newPublicNotice.length === 0"
						style="text-align: center; font-size: 12px; color: #b9babc;margin-top: 30px;"> 暂无数据</div>
					<div style="font-size: 10px;position: absolute; right: 15px;top:0;">
						<button
							style="cursor:pointer; font-size: 18px; padding-right: 5px;background-color: #171717;color: #fff;"
							class="last" @click="previousPage(0)"> &lt;
						</button>
						<button style="cursor:pointer; font-size: 18px;background-color: #171717;color: #fff;"
							class="next" @click="nextPage(0)"> &gt;
						</button>
					</div>
				</div>
			</div>
			<div class="test" style="width: 50%; height: 400px;">
				<h2 style=" position: relative;top: 30px; height: 20%;margin-left: 50px;font-weight: 700;">
					常见问题
				</h2>
				<div class="special_offer_style"
					style="height: 70%;padding-top: 10px;position: relative;background-image: none;">
					<div v-for="(item,index) in programInfo" v-bind:key="index" class="help_program"
						@click="showNotice(index)">{{item.title}}
					</div>
					<div v-if="programInfo.length === 0"
						style="text-align: center; font-size: 12px; color: #b9babc;margin-top: 30px;"> 暂无数据</div>
					<div style="font-size: 10px;position: absolute; right: 15px;top:0;">
						<button
							style="cursor:pointer; font-size: 18px; padding-right: 5px;background-color: #171717;color: #fff;"
							class="last" @click="previousPage(1)"> &lt; </button>
						<button style="cursor:pointer; font-size: 18px;background-color: #171717; color: #fff;"
							class="next" @click="nextPage(1)"> &gt;
						</button>
					</div>
				</div>
			</div>
		</div>

		<div style="position: fixed;top: 0; width: 100vmax;height: 100%; background-color: transparent;"
			v-if="showNews">
			<div class="notice">
				<div v-html="document_info" style="padding-left: 5%;padding-top: 50px;"></div>
				<div style="position: absolute; left: 10px;top: 10px; font-size: 30px;cursor:pointer; border: #fff solid 1px; background-color: #b9babc; width: 30px;height: 30px;text-align: center;line-height: 30px;"
					@click="outNotice()">×
				</div>
			</div>
		</div>

		<!-- <div class="test">
			<div style="height: 20%;margin-left: 20px;font-weight: 700;">
				费用信息
			</div>
			<div style="width: 98%; height: 100px; margin: 0 auto;display: flex;">
				<div class="middle">账户余额（元）
					<div
						style="width: 100%; height: 60%;margin-top: 10px; font-size: 20px;position: relative;display: flex; align-items: center;">
						312
						<div
							style="position: absolute;right: 0; width: 23%; height: 90%;background-color: #ff7200;border: 1px solid #d5dae2;color: #fff;font-size: 14px;font-weight: 500;display: flex;justify-content: center; align-items: center;">
							充值
						</div>
					</div>
				</div>
				<div class="middle">优惠券（张）
					<div
						style="width: 100%; height: 60%;margin-top: 10px; font-size: 20px;position: relative;display: flex; align-items: center;">
						0
					</div>
				</div>

				<div class="middle">可开发票（元）
					<div
						style="width: 100%; height: 60%;margin-top: 10px; font-size: 20px;position: relative;display: flex; align-items: center;">
						5999
						<div
							style="position: absolute;right: 0; width: 23%; height: 90%;color: #5791ff;border: 1px solid #d5dae2; font-size: 14px;font-weight: 500;display: flex;justify-content: center; align-items: center;">
							开票
						</div>
					</div>
				</div>

			</div>

		</div> -->
	</div>
</template>

<script>
	import axios from "axios"
	import {
		pageByProgram,
		pageByNewNotice
	} from '../../api/work.js'
	export default {
		data() {
			return {
				showNews: false,
				newPublicNotice: [],
				programInfo: [

				],
				p_totalnum: 0, //总数据条数
				p_currentPage: 1, //起始页
				p_pagesize: 5, //每一页的数据条数,
				p_maxPage: 1,
				document_info: '', // 文本内容
				n_totalnum: 0, //总数据条数
				n_currentPage: 1, //起始页
				n_pagesize: 5, //每一页的数据条数,
				n_maxPage: 1,
			};
		},
		computed: {
			// 计算属性  
		},
		mounted() {
			this.getProgramInfo()
			this.getNoticeInfo()
		},
		methods: {
			// 方法  
			tobuy() {
				this.$router.push('/demo/goods')
			},
			tohelp() {
				this.$router.push('/demo/help_document')
			},
			showNotice(index) {
				this.showNews = true;
				console.log(this.programInfo[index])
				this.document_info = this.programInfo[index].content
			},
			// toList() {
			// 	this.$router.push('/demo/notieList')
			// },

			getProgramInfo() {
				let data = {
					page: this.p_currentPage,
					limit: this.p_pagesize,
				}
				pageByProgram(data).then(res => {
					console.log(res)
					this.p_totalnum = res.total;
					if (res.navigateLastPage != 0) {
						this.p_maxPage = res.navigateLastPage;
					}


					this.programInfo = res.list
					console.log(this.programInfo)
				}).catch((err) => {
					console.log(err)
				})
			},
			getNoticeInfo() {
				let data = {
					page: this.n_currentPage,
					limit: this.n_pagesize
				}
				pageByNewNotice(data).then(res => {
					console.log(res)
					this.n_totalnum = res.total;
					if (res.navigateLastPage != 0) {
						this.n_maxPage = res.navigateLastPage;
					}
					this.newPublicNotice = res.list
					console.log(this.newPublicNotice)
				}).catch((err) => {
					console.log(err)
				})
			},
			outNotice() {
				this.showNews = false;
				this.document_info = ''
			},
			showPubNotice(index) {
				this.showNews = true;
				console.log(this.newPublicNotice[index])
				this.document_info = this.newPublicNotice[index].content
			},
			previousPage(type) {
				if (type === 0) {
					// 最新公告页数
					if (this.n_currentPage === 1) {
						this.$alert('此页已为最小页数', '提示', {
							confirmButtonText: '确定',
							// callback: action => {
							// 	this.$message({
							// 		type: 'info',
							// 		message: `action: ${ action }`
							// 	});
							// }
						});
					} else {
						this.n_currentPage -= 1
						// 发起请求，获取该页数据
						this.getNoticeInfo()
						console.log(this.newPublicNotice)
					}
				} else {
					// 常见问题页数
					if (this.p_currentPage === 1) {
						this.$alert('此页已为最小页数', '提示', {
							confirmButtonText: '确定',
							// callback: action => {
							// 	this.$message({
							// 		type: 'info',
							// 		message: `action: ${ action }`
							// 	});
							// }
						});
					} else {
						this.p_currentPage -= 1
						// 发起请求，获取该页数据
						this.getProgramInfo()
						console.log(this.programInfo)
					}
				}
			},
			nextPage(type) {
				if (type === 0) {
					// 最新公告页数
					console.log(this.n_currentPage)
					console.log(this.n_maxPage)
					if (this.n_currentPage === this.n_maxPage) {
						this.$alert('此页已为最大页数', '提示', {
							confirmButtonText: '确定',
							// callback: action => {
							// 	this.$message({
							// 		type: 'info',
							// 		message: `action: ${ action }`
							// 	});
							// }
						});
					} else {
						this.n_currentPage += 1
						// 发起请求，获取该页数据
						this.getNoticeInfo()
						console.log(this.newPublicNotice)
					}
				} else {
					// 常见问题页数
					if (this.p_currentPage === this.p_maxPage) {
						this.$alert('此页已为最大页数', '提示', {
							confirmButtonText: '确定',
							// callback: action => {
							// 	this.$message({
							// 		type: 'info',
							// 		message: `action: ${ action }`
							// 	});
							// }
						});
					} else {
						this.p_currentPage += 1
						// 发起请求，获取该页数据
						this.getProgramInfo()
						console.log(this.programInfo)
					}
				}
			}
		}
	};
</script>

<style scoped>
	button {
		border: none;
	}

	.test {
		width: 100%;
		height: 300px;
		margin: 5px 0;
		background-color: #171717;

	}

	.special_offer_style {
		overflow: hidden;
		width: 95%;
		height: 90%;
		margin: 0 auto;
		padding: 0 0 0 10px;
		border-radius: 10px;
		margin-top: 20px;
		background-position: 80%;
		background-image: url('./image/hero.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.news {
		width: 22%;
		height: 90%;
		background-color: #f6f8fb;
		box-sizing: border-box;
		margin-left: 40px;

	}

	.help_program:hover {
		color: #1777f5;
	}

	.help_program {
		margin-top: 20px;
		margin-left: 30px;
		font-size: 18px;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.middle {
		margin: 0 10px;
		background-color: #f6f8fb;
		width: 32%;
		height: 100%;
		padding: 15px;
		box-sizing: border-box;
		font-weight: 600;
		font-size: 13px;
	}

	@keyframes slideInFromRight {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	.notice {
		position: fixed;
		top: 9%;
		right: 0;
		z-index: 3;
		height: 100%;
		width: 82.5%;
		background-color: #000000;
		color: #fff;
		animation: slideInFromRight .5s forwards;
	}


	.xg_button {
		--border-radius: 15px;
		--border-width: 4px;
		appearance: none;
		position: relative;
		padding: 1em 2em;
		border: 0;
		background-color: transparent;
		font-family: "Roboto", Arial, "Segoe UI", sans-serif;
		font-size: 18px;
		font-weight: 500;
		color: #fff;
		z-index: 0;
	}

	.xg_button::after {
		--m-i: linear-gradient(#000, #000);
		--m-o: content-box, padding-box;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: var(--border-width);
		border-radius: var(--border-radius);
		background-image: conic-gradient(#488cfb,
				#29dbbc,
				#ddf505,
				#ff9f0e,
				#e440bb,
				#655adc,
				#488cfb);
		-webkit-mask-image: var(--m-i), var(--m-i);
		mask-image: var(--m-i), var(--m-i);
		-webkit-mask-origin: var(--m-o);
		mask-origin: var(--m-o);
		-webkit-mask-clip: var(--m-o);
		mask-composite: exclude;
		-webkit-mask-composite: destination-out;
		filter: hue-rotate(0);
		animation: rotate-hue linear 500ms infinite;
		animation-play-state: paused;
	}

	button:hover::after {
		animation-play-state: running;
	}

	@keyframes rotate-hue {
		to {
			filter: hue-rotate(1turn);
		}
	}

	button,
	button::after {
		box-sizing: border-box;
	}

	button:active {
		--border-width: 5px;
	}

	.el-message-box {
		border: none;
		background-color: #171717;

	}

	.el-message-box__title {
		color: #fff;
	}

	.el-message-box__content {
		color: #fff;
	}
</style>